const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
    entry: './src/index.ts', //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), //输出路径
        filename: 'bundle.js', //打包后的文件名
        environment:{  
            arrowFunction:false,   //禁止webpack使用箭头函数,,可以使打包的js最外层的不是箭头函数，不然在ie11上会报错
            const:false,  //禁止使用const
        }
    },
    module: {//指定要加载的规则
        rules: [
            {
                test: /\.ts$/, //匹配以ts结尾的文件
                use: [
                    {
                        loader:'babel-loader',//指定的加载器
                        options:{ //设置bable
                           presets:[
                            [
                                "@babel/preset-env", //指定环境的插件
                            {                 //配置信息
                                 targets:{//要兼容的目标浏览器
                                    "chrome":"88",
                                    "ie":"11"
                                 },
                                 "corejs":"3",//指定core-js版本
                                 "useBuiltIns":"usage",//使用core-js的方式 usage表示按需加载
                            }
                            ]
                           ]
                        }
                    },
                    'ts-loader'],
                exclude: /node_modules/,
            },
            { //配置lessloader
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            postcssOptions:{
                                plugins:[
                                    [
                                        'postcss-preset-env',
                                        {
                                            browsers:['last 3 versions','ie >= 10'] //指定浏览器版本
                                        }
                                    ]
                                ]
                    }
                 }
                },
                    'less-loader',
                ]

            }
        ]
    },
    plugins:[   //引入配置插件
       new HTMLWebpackPlugin({   //webpack自动生成html模板插件
        //    title:'这是一个自定义title',
        template:"./src/index.html"
       }),
       new CleanWebpackPlugin()    //清理dist文件夹，也就是上次打包的文件
    ],
    resolve:{ //用来设置引用的模块
       extensions:['.js','.ts']  //表示可以引入js,ts为结尾的文件
    },
    devServer:{
        open:true
    },
    mode:"production"
}